<template>
<div class="merchandise-categories-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">基础设置</div>
        <div class="wlm-form-content" v-if="$values">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="发送时间点">
                    <span v-if="$route.query.key=='bedealer'">成为分销商时</span>
                    <span v-if="$route.query.key=='nextdealer'">新增下级时</span>
                    <span v-if="$route.query.key=='sendcoupon'">优惠券发送后</span>
                    <span v-if="$route.query.key=='dealerextract'">用户发起提现后以及审核通过后</span>
                    <span v-if="$route.query.key=='busextract'">商家发起提现后以及审核通过后</span>
                    <span v-if="$route.query.key=='assist'">好友助力时</span>
                    <div v-if="$route.query.key=='deliver'">
                        <el-time-select v-model="$values.common.send_time" format="HH" :picker-options="{start: '00:00',step: '01:00',end: '24:00'}" placeholder="选择时间">
                        </el-time-select>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="wlm-form-header">短信设置</div>
        <div class="wlm-form-content" v-if="$values">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="模板ID">
                    <el-input v-model="$values.sms.templateid"></el-input>
                    <div class="form-help" v-if="$route.query.newNumber=='1'">模板内容：亲，恭喜你成为{平台名称}分销商，请点击查看</div>
                    <div class="form-help" v-if="$route.query.newNumber=='2'">模板内容：亲，恭喜你{新增时间}新增了一名下级{下级昵称}，请点击查看</div>
                </el-form-item>
                <el-form-item label="是否开启">
                    <el-radio-group v-model="$values.sms.status">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-form-header">微信模板消息</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="是否开启">
                    <el-radio-group v-model="$values.wxapp.status">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="wlm-form-header" v-if="patSetting.channel.wxapp.open">微信小程序消息</div>
        <div class="wlm-form-content" v-if="$values&&patSetting.channel.wxapp.open">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="是否开启">
                    <el-radio-group v-model="$values.sapp.status">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="模板ID">
                    <el-input placeholder="模板ID" v-model="$values.sapp.template_id">
                        <el-button @click="oneGetCode('sapp',2)" slot="append">一键获取</el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-form-header" v-if="patSetting.channel.wechat.open">微信公众号消息</div>
        <div class="wlm-form-content" v-if="$values&&patSetting.channel.wechat.open">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="是否开启">
                    <el-radio-group v-model="$values.wechat.status">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="是否使用独立模板">
                    <el-radio-group v-model="$values.wechat.is_stand">
                        <el-radio label="1">独立</el-radio>
                        <el-radio label="2">默认</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="公众号短信模板" v-show="$values.wechat.is_stand==1">
                    <div class="flex-row">
                        <el-button :type="haswechatName?'':'primary'" @click="$refs.choosewechat.toggle()" style="display: block;">{{haswechatName?haswechatName:'选择公众号短信模板'}}</el-button>
                        <el-button v-if="haswechatName" @click="smsClearwechat" type="text" style="margin-left:20px;" icon="el-icon-delete"></el-button>
                    </div>
                    <choose-sms ref="choosewechat" :config="choosewechatConfig" :changeEvt="filterswechatChange"></choose-sms>
                </el-form-item>
                v-show="$values.wechat.is_stand==2" -->
                <el-form-item label="模板ID">
                    <el-input placeholder="模板ID" v-model="$values.wechat.template_id">
                        <el-button @click="oneGetCode('wechat',4)" slot="append">一键获取</el-button>
                    </el-input>
                    <div class="form-help" v-if="$route.query.key=='bedealer'">公众平台模板消息编号：IT科技—互联网|电子商务—OPENTM415477060[名称：业务处理结果通知]</div>
                    <div class="form-help" v-if="$route.query.key=='nextdealer'">公众平台模板消息编号：IT科技—互联网|电子商务—OPENTM415477060[名称：业务处理结果通知]</div>
                    <!-- <div class="form-help" v-if="$route.query.key=='deliver'">公众平台模板消息编号：IT科技—互联网|电子商务—AT1897[名称：用户召回提醒]</div> -->
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-form-header" v-if="patSetting.channel.baiduapp.open">百度小程序消息</div>
        <div class="wlm-form-content" v-if="$values&&patSetting.channel.baiduapp.open">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="是否开启">
                    <el-radio-group v-model="$values.baidu.status">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="模板ID">
                    <el-input placeholder="模板ID" v-model="$values.baidu.template_id">
                        <el-button @click="oneGetCode('baidu',8)" slot="append">一键获取</el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="wlm-form-header" v-if="patSetting.channel.aliapp.open">支付宝小程序消息</div>
        <div class="wlm-form-content" v-if="$values&&patSetting.channel.aliapp.open">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="是否开启">
                    <el-radio-group v-model="$values.alipay.status">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="模板ID">
                    <el-input placeholder="模板ID" v-model="$values.alipay.template_id"></el-input>
                    <div class="form-help" v-if="$route.query.key=='bedealer'">公众平台模板消息编号：IT科技—互联网|电子商务—OPENTM415477060[名称：业务处理结果通知]</div>
                    <div class="form-help" v-if="$route.query.key=='nextdealer'">公众平台模板消息编号：IT科技—互联网|电子商务—OPENTM415477060[名称：业务处理结果通知]</div>
                </el-form-item>
            </el-form>
        </div> -->
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/application/notification', code: 1 }})" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import {
  smsTplGet,
  smsTplSave,
  createMessageTemplate
} from '@/api/application'
import mixins from '@/mixins/mixins'
import power from '@/mixins/power'
export default {
  mixins: [mixins.getters('Form'), power],
  name: 'NotificationMarketing',
  components: {

  },
  computed: {
    // haswechatName() {
    //   return this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['name']
    // },
    $values() {
      const $valuse = this.formFormatData.formData.values[`${this.$route.query.key}`]
      const { wechat, baidu, alipay, common } = $valuse
      if (!(!!wechat && Object.keys(wechat)['length'] > 0)) {
        $valuse.wechat = {
          status: '0',
          template_id: ''
        }
      }
      // if (!!wechat && Object.keys(wechat)['length'] === 2) {
      //   Object.assign($valuse.wechat, { name: '', templateid: '', is_stand: '2' })
      // }
      if (!(!!common && Object.keys(common)['length'] > 0)) {
        $valuse.common = {
          unpaid: '',
          send_time: ''
        }
      }

      if (!(!!baidu && Object.keys(baidu)['length'] > 0)) {
        $valuse.baidu = {
          status: '0',
          template_id: ''
        }
      }
      if (!(!!alipay && Object.keys(alipay)['length'] > 0)) {
        $valuse.alipay = {
          status: '0',
          template_id: ''
        }
      }
      return $valuse
    }
  },
  data() {
    return {
      choosewechatConfig: {
        type: ['choosesms'],
        model: 'display',
        wechatFiles: '1',
        disabled: [{
          label: 'status',
          value: 1,
          reverse: true
        },
        {
          label: 'get_limit_type',
          value: 1
        }, {
          label: 'sms_type',
          value: 40
        }],
        initList: []
      },
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: smsTplGet,
            params: {
              id: ''
            },
            redirect: 'type'
          },
          submitForm: smsTplSave
        },
        formData: {
          key: this.$route.query.key,
          values: {
            [`${this.$route.query.key}`]: {
              // sms: {
              //   status: '0',
              //   templateid: ''
              // },
              common: {
                unpaid: '',
                send_time: ''
              },
              wechat: {
                status: '0',
                template_id: ''
                // name: '',
                // templateid: '',
                // is_stand: '2'
              },
              alipay: {
                status: '0',
                template_id: ''
              },
              baidu: {
                status: '0',
                template_id: ''
              },
              sapp: {
                status: '0',
                template_id: ''
              }
            }
          }
        },
        rules: {
          // name: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
          // image_id: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
          // sort: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
        }
      }
    }
  },
  methods: {
    // 公众号
    smsClearwechat() {
      this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['templateid'] = ''
      this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['template_id'] = ''
      this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['name'] = ''
      this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['status'] = '0'
    },
    filterswechatChange(arg) {
      const { displayData } = arg
      console.log(displayData, 'display3')
      displayData.map(item => {
        this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['templateid'] = item.template_id
        this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['template_id'] = item.id
        this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['name'] = item.name
        this.formFormatData.formData.values[`${this.$route.query.key}`]['wechat']['status'] = '1'
      })
    },
    oneGetCode(source, sourceNum) {
      createMessageTemplate({ source: sourceNum, key: this.$route.query.key }).then(res => {
        const { data: { code, data, msg } } = res
        if (code === 1) {
          this.formFormatData.formData.values[`${this.$route.query.key}`][`${source}`] = { status: '1', template_id: data }
          console.log(this.formFormatData.formData.values[`${this.$route.query.key}`][`${source}`])
          this.$message({
            type: 'success',
            message: '获取成功!'
          })
        } else {
          this.$message.error(msg)
        }
      })
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editBeforeForm') {
        console.log(data)
        const { values: { [`${this.$route.query.key}`]: { wechat, baidu, alipay, sapp, common } } } = data
        if (!(!!wechat && Object.keys(wechat)['length'] > 0)) {
          data.values[`${this.$route.query.key}`].wechat = {
            status: '0',
            template_id: ''
          }
        }
        // if (!!wechat && Object.keys(wechat)['length'] === 2) {
        //   Object.assign(data.values[`${this.$route.query.key}`].wechat, { name: '', templateid: '', is_stand: '2' })
        // }
        if (!(!!common && Object.keys(common)['length'] > 0)) {
          data.values[`${this.$route.query.key}`].common = {
            unpaid: '',
            send_time: ''
          }
        }
        if (!(!!baidu && Object.keys(baidu)['length'] > 0)) {
          data.values[`${this.$route.query.key}`].baidu = {
            status: '0',
            template_id: ''
          }
        }
        if (!(!!alipay && Object.keys(alipay)['length'] > 0)) {
          data.values[`${this.$route.query.key}`].alipay = {
            status: '0',
            template_id: ''
          }
        }

        if (!(!!sapp && Object.keys(sapp)['length'] > 0)) {
          data.values[`${this.$route.query.key}`].sapp = {
            status: '0',
            template_id: ''
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.merchandise-categories-add {}
</style>
